<template>
  <div class="cate">
    <nav-bar title="分类"></nav-bar>
    <my-search></my-search>
    <div class="content">
      <van-sidebar v-model="active">
        <van-sidebar-item v-for="(item, index) in cateData" :key="item.cat_id
        " :title="item.cat_name" />
      </van-sidebar>
      <div class="right">
        <ul>
          <li v-for="(item, index) in rightData" :key="item.cat_id">
            <h3>{{ item.cat_name }}</h3>
            <van-grid :column-num="3">
              <van-grid-item v-for="n in item.children" :key="n.cat_id" :icon="n.cat_icon" :text="n.cat_name"
                @click="goGoods(n.cat_id)" />
            </van-grid>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import mySearch from '@/components/mySearch.vue';
import { categories } from '@/api/home/index';
export default {
  components: { mySearch },
  data() {
    return {
      cateData: [], // 分类的数据
      active: 0, // 侧边栏的索引
      rightData: [], // 右边的数据
    }
  },
  created() {
    categories().then(res => {
      this.cateData = res.message;
      this.rightData = res.message[0].children; // 获取默认右边的数据
    })
  },
  watch: {
    active(newVal) { // 监听左边导航的索引变化
      this.rightData = this.cateData[newVal].children;
    }
  },
  methods: {
    goGoods(id) { // 跳转到商品列表页面
      this.$router.push(`/goods?id=${id}`);
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  height: calc(100% - 100px);
  display: flex;
  background-color: #fff;

  .right {
    flex: 1;
    overflow: auto;

    h3 {
      font-size: 16px;
      text-align: center;
    }
  }

  .van-sidebar-item--select:before {
    background-color: red;
  }
}
</style>